<!DOCTYPE html>
<html>

  <head>
    <title>threejs-VR全景</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=2,maximum-scale=1,user-scalable=yes">
    <meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1"  />

    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        overflow: hidden;
      }
     
      canvas {
        width: 100%;
        height: 100%
      }
    </style>
  </head>

  <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/100/three.min.js"></script>
    <script>
      // 初始化
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight)
      document.body.appendChild(renderer.domElement);

      var scene = new THREE.Scene();

      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(0, -0, 0) // 设置相机位置
      camera.lookPoint = {} // 设置观察点，手动保存在相机中备用，也可以挂载到camera.userData对象方便克隆
      camera.lookPoint.x = 0
      camera.lookPoint.y = 0
      camera.lookPoint.z = -1
      camera.lookAt(camera.lookPoint.x, camera.lookPoint.y, camera.lookPoint.z)

      // 模型
     // 全景场景
     var geometry = new THREE.SphereGeometry(500, 60, 60);
     // 按z轴翻转
     geometry.scale(1, 1, -1);
     // 添加贴图
     outside_low = new THREE.MeshBasicMaterial({
       map: new THREE.TextureLoader().load('./img/test.jpg')
     });
     /* inside_low = new THREE.MeshBasicMaterial({
       map: new THREE.TextureLoader().load('./img/room/苏州城夜景.jpg')
     }); */
     mesh = new THREE.Mesh(geometry, outside_low);
     /* //异步加载高清纹理图
     new THREE.TextureLoader().load('./img/room/dengyinchao.jpeg', texture => {
       outside = new THREE.MeshBasicMaterial({ map: texture });
       mesh.material = outside;
     }); */
     scene.add(mesh);

      //环境光
      let ambient = new THREE.AmbientLight(0xffffff);
      scene.add(ambient)

      // 渲染
      function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render)
      }
      render();

      // 全景
      (function() {

        // 初始坐标
        let initPos = {
          x: null,
          y: null,
        }

        let open = false
        let coe = 0.2
        let matrixWorldInverse = null // 视图矩阵
        let matrixWorld = null // 逆矩阵

        let lookPoint = {
          x: null,
          y: null,
          z: null
        }

        let up = {
          x: null,
          y: null,
          z: null
        }

        let touchId = null

        // 判断浏览器环境
        if(navigator.userAgent.match(/android|iphone|symbianos|window\sphone|ipad|ipos/gi) === null) {
          // pc
          renderer.domElement.addEventListener('mousedown', function(event) {
            event = event || window.event
            // 坐标
            let x = event.clientX - renderer.domElement.getBoundingClientRect().left
            let y = event.clientY - renderer.domElement.getBoundingClientRect().top

            // 初始状态
            initPos.x = x
            initPos.y = y
            open = true
            matrixWorld = camera.matrixWorld.clone()
            matrixWorldInverse = camera.matrixWorldInverse.clone()
            lookPoint.x = camera.lookPoint.x
            lookPoint.y = camera.lookPoint.y
            lookPoint.z = camera.lookPoint.z
            up.x = camera.up.x
            up.y = camera.up.y
            up.z = camera.up.z

          })

          // 查看中
          renderer.domElement.addEventListener('mousemove', function(event) {
            if(!open) return
            event = event || window.event

            // 坐标
            let x = event.clientX - renderer.domElement.getBoundingClientRect().left
            let y = event.clientY - renderer.domElement.getBoundingClientRect().top

            let diffX = x - initPos.x
            let diffY = y - initPos.y

            // 转角度
            let angleX = Math.PI / 180 * diffX * coe
            let angleY = Math.PI / 180 * diffY * coe

            // 旋转矩阵
            let xRotateMatrix = new THREE.Matrix4().set(1, 0, 0, 0, 0, Math.cos(angleY), -Math.sin(angleY), 0, 0, Math.sin(angleY), Math.cos(angleY), 0, 0, 0, 0, 1)
            let yRotateMatrix = new THREE.Matrix4().set(Math.cos(angleX), 0, Math.sin(angleX), 0, 0, 1, 0, 0, -Math.sin(angleX), 0, Math.cos(angleX), 0, 0, 0, 0, 1)

            let lookPointVector = new THREE.Vector4(lookPoint.x, lookPoint.y, lookPoint.z, 1).applyMatrix4(matrixWorldInverse).applyMatrix4(xRotateMatrix).applyMatrix4(yRotateMatrix).applyMatrix4(matrixWorld)

            let upStartVector = new THREE.Vector4(0, 0, 0, 1).applyMatrix4(matrixWorldInverse).applyMatrix4(xRotateMatrix).applyMatrix4(yRotateMatrix).applyMatrix4(matrixWorld)
            let upEndVector = new THREE.Vector4(up.x, up.y, up.z, 1).applyMatrix4(matrixWorldInverse).applyMatrix4(xRotateMatrix).applyMatrix4(yRotateMatrix).applyMatrix4(matrixWorld)

            // 更新相机
            camera.up.set(upEndVector.x - upStartVector.x, upEndVector.y - upStartVector.y, upEndVector.z - upStartVector.z)
            camera.lookPoint.x = lookPointVector.x
            camera.lookPoint.y = lookPointVector.y
            camera.lookPoint.z = lookPointVector.z
            camera.lookAt(camera.lookPoint.x, camera.lookPoint.y, camera.lookPoint.z)

          })

          // 监听结束
          window.addEventListener('mouseup', overLook)
          window.addEventListener('mouseout', overLook)

          function overLook(event) {
            open = false
            matrixWorldInverse = null
            matrixWorld = null
            lookPoint = {
              x: null,
              y: null,
              z: null
            }
            up = {
              x: null,
              y: null,
              z: null
            }
            touchId = null

          }

        } else {
          // 移动
          renderer.domElement.addEventListener('touchstart', function(event) {
            event = event || window.event

            if(event.touches.length > 1) {
              overTurn(event)
              return
            }

            // 坐标
            let x = event.touches[0].clientX - renderer.domElement.getBoundingClientRect().left
            let y = event.touches[0].clientY - renderer.domElement.getBoundingClientRect().top

            // 初始状态
            initPos.x = x
            initPos.y = y
            open = true
            matrixWorld = camera.matrixWorld.clone()
            matrixWorldInverse = camera.matrixWorldInverse.clone()
            lookPoint.x = camera.lookPoint.x
            lookPoint.y = camera.lookPoint.y
            lookPoint.z = camera.lookPoint.z
            up.x = camera.up.x
            up.y = camera.up.y
            up.z = camera.up.z
            touchId = event.touches[0].identifier

          })

          //查看中
          renderer.domElement.addEventListener('touchmove', function(event) {
            if(!open) return
            event = event || window.event
            event.preventDefault()

            let touch
            for(let i = 0; i < event.touches.length; i++) {
              if(event.touches[i].identifier === touchId) {
                touch = event.touches[i]
              }
            }
            if(!touch) return

            // 坐标
            let x = touch.clientX - renderer.domElement.getBoundingClientRect().left
            let y = touch.clientY - renderer.domElement.getBoundingClientRect().top

            let diffX = x - initPos.x
            let diffY = y - initPos.y

            // 转角度
            let angleX = Math.PI / 180 * diffX * coe
            let angleY = Math.PI / 180 * diffY * coe

            // 旋转矩阵
             let xRotateMatrix = new THREE.Matrix4().set(1, 0, 0, 0, 0, Math.cos(angleY), -Math.sin(angleY), 0, 0, Math.sin(angleY), Math.cos(angleY), 0, 0, 0, 0, 1)
            let yRotateMatrix = new THREE.Matrix4().set(Math.cos(angleX), 0, Math.sin(angleX), 0, 0, 1, 0, 0, -Math.sin(angleX), 0, Math.cos(angleX), 0, 0, 0, 0, 1)

            let lookPointVector = new THREE.Vector4(lookPoint.x, lookPoint.y, lookPoint.z, 1).applyMatrix4(matrixWorldInverse).applyMatrix4(xRotateMatrix).applyMatrix4(yRotateMatrix).applyMatrix4(matrixWorld)

            let upStartVector = new THREE.Vector4(0, 0, 0, 1).applyMatrix4(matrixWorldInverse).applyMatrix4(xRotateMatrix).applyMatrix4(yRotateMatrix).applyMatrix4(matrixWorld)
            let upEndVector = new THREE.Vector4(up.x, up.y, up.z, 1).applyMatrix4(matrixWorldInverse).applyMatrix4(xRotateMatrix).applyMatrix4(yRotateMatrix).applyMatrix4(matrixWorld)

            // 更新相机
            camera.up.set(upEndVector.x - upStartVector.x, upEndVector.y - upStartVector.y, upEndVector.z - upStartVector.z)
            camera.lookPoint.x = lookPointVector.x
            camera.lookPoint.y = lookPointVector.y
            camera.lookPoint.z = lookPointVector.z
            camera.lookAt(camera.lookPoint.x, camera.lookPoint.y, camera.lookPoint.z)

          }, {
            passive: false
          })

          // 监听结束
          window.addEventListener('touchend', overLook1)
          window.addEventListener('touchcancel', overLook1)

          function overLook1(event) {
            // 初始化
            open = false
            matrixWorldInverse = null
            matrixWorld = null
            lookPoint = {
              x: null,
              y: null,
              z: null
            }
            up = {
              x: null,
              y: null,
              z: null
            }
            touchId = null
          }

        }

      })()
    </script>
  </body>

</html>